<!doctype html>
<html>
{include file="layout/header" /}
<style>
    .layui-btn + .layui-btn{margin: 0;}
    .main{ margin: 12px 0;}
    .main-top{ border-bottom: 1px solid #e5e5e5;  height: 12px;  width: 100%;  position: fixed;  top: 0;  background-color: #FFFFFF;  z-index: 100;  }
    .main .left{max-width:135px; height:100%;width: 135px;border-right: 1px solid #e5e5e5;border-left: 1px solid #e5e5e5;float: left;}
    .main .left .left-top{position: fixed;padding: 10px 10px 0;height: 45px;border-bottom: 1px solid #e5e5e5;}
    .main .left .tabs-left{overflow-y: auto;height: calc(100% - 60px);width:135px;position: fixed;top:58px;border-right: 1px solid #e5e5e5;}
    .main ::-webkit-scrollbar{width: 3px;height: auto;background-color: #ddd;}
    .main ::-webkit-scrollbar-thumb {
        border-radius: 1px;
        -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,.3);
        background-color: #333;
    }
    .main ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 1px;
        background: #e5e5e5;
    }
    .main .left .list-group li.active a{color: #fff!important;}
    .main .right{width: calc(100% - 137px);float: right;}
    .main .right .right-top{position: fixed;background-color: #fff;  z-index: 1000;width: 100%;padding: 7px 10px 0;height: 45px;border-bottom: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;}
    .main .right .imagesbox{width: calc(100% - 139px);height: calc(100% - 100px);position: fixed; top:58px; min-height: 200px;overflow-y: auto;}
    .main .right .imagesbox .image-item{text-align:center;position: relative;display: inline-block;  width: 112px;height: 132px;  border: 1px solid #ECECEC;background-color: #F7F6F6;  cursor: default;  margin: 10px 0 0 10px;padding: 5px;}
    .main .right .imagesbox .image-item img{width: 100px;height: 100px;}
    .main .right .imagesbox .on{border: 3px dashed #0092DC;padding: 3px;}
    .main .right .foot-tool{position: fixed;bottom: 0px;width: calc(100% - 117px);background-color:#fff;height: 45px;padding: 7px 10px 0;border-top: 1px solid #e5e5e5;}
    .main .right .foot-tool .page{padding: 0px 10px;float: right;}
    .main .right .foot-tool .page ul{width: 100%}
</style>
<body>
<div class="main" id="app">
    <div class="main-top"></div>
    <div class="left">
        <div class="left-top">
            <button onclick="handlePrompt(this)" data-title="添加分类" data-url="{:url('attachment/handleCreate', ['_m'=>'AttachmentCateModel'])}" class="btn btn-sm btn-outline-primary" data-toggle="tooltip" title="添加分类" >
                <i class="fa fa-plus" ></i>
            </button>
            <button onclick="handlePrompt(this,'{$pid}')" data-title="编辑当前分类" data-url="{:url('attachment/handleSave', ['_m'=>'AttachmentCateModel'])}" class="btn btn-sm btn-outline-primary" data-toggle="tooltip" title="编辑当前分类" >
                <i class="fa fa-pencil" ></i>
            </button>
            <button onclick="delOne(this,'{$pid}')" data-title="删除当前分类" data-url="{:url('attachment/handleDel', ['_m'=>'AttachmentCateModel'])}" class="btn btn-sm btn-outline-primary" data-toggle="tooltip" title="删除当前分类" >
                <i class="fa fa-remove" ></i>
            </button>
        </div>
        <div class="tabs-left">

            <ul class="list-group">
                <li class="list-group-item {eq name='pid' value='0'}active{/eq}"><a href="{:Url('index', ['pid' => 0])}">未分类</a></li>
                {volist name="$typearray" id="vo" key="k"}
                    <li class="list-group-item {eq name='pid' value="$vo['id']"}active{/eq}" >
                        <a href="{:Url('index',['pid'=>$vo.id])}">{$vo.name}</a>
                    </li>
                    {volist name="$vo._child" id="voo" key="kk"}
                    <li class="list-group-item {eq name='pid' value="$voo['id']"}active{/eq}" >
                        <a href="{:Url('index',['pid'=>$voo.id])}">{if condition="$kk eq count($vo._child)"} └ {else/}├{/if}{$voo.name}</a>
                    </li>
                    {/volist}
                {/volist}
            </ul>
        </div>
    </div>
    <div class="right">
        <div class="right-top">
            <button class="btn btn-sm btn-outline-primary" id="move-img">移动到分类</button>
            <button class="btn btn-sm btn-outline-primary" id="delete-img">删除选中图片</button>
        </div>
        <div class="imagesbox">
            {volist name="list" id="vo"}
            <label class="image-item">
                <div class="image-delete" data-url="{:Url('delete',array('att_id'=>$vo.att_id))}"></div>
                <img class="pic" src="{$vo.att_dir|ltrim='.'}" id="{$vo.att_id}"/>
                <input name="select[]" type="{$Request.param.type == 'single' ? 'radio' : 'checkbox' }" value="{$vo.att_id}" class="minimal select-img" data-id="{$vo.att_id}" data-src="{$vo.att_dir}"/>
            </label>
            {/volist}
        </div>
        <div class="foot-tool">
            <button class="btn btn-sm btn-outline-primary jkup" data-act='{:url("attachment/upload",["pid" => $pid])}' data-cb="whenUploaded">上传图片</button>
            <button class="btn btn-sm btn-primary" id="handle-select">使用选中的图片 {$Request.param.dom_id}</button>
            <div class="page">{$list|raw}</div>
        </div>
    </div>
</div>
{include file="layout/footer" /}
{load href="__STATIC__/js/jk-uploader.js"/}
<script>

    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    // 使用选中的图片
    $('#handle-select').click(function(){
        var selected = getSelectedSrc();
        parent.handleSelctedImg('{$Request.param.dom_id}', selected, '{$Request.param.type}');
        parent.layer.close(index);
    });
    function getSelectedIds() {
        var objs = $('.select-img:checked');
        var ids = [];
        for(var img of objs) {
            ids.push($(img).data('id'));
        }
        return ids;
    }
    function getSelectedSrc() {
        var objs = $('.select-img:checked');
        var src = [];
        for(var img of objs) {
            src.push($(img).data('src'));
        }
        return src;
    }

    // 移动分类
    $('#move-img').click(function(){
      popupPage('请选择分类', '{:url("moveImg")}' + '?ids=' + getSelectedIds().join(','), 600, 200);
    });
    // 移动分类
    $('#delete-img').click(function(){
      ajaxRequest("{:url('deleteImg')}", {ids: getSelectedIds()},function() {
        location.reload();
      });
    });
    function whenUploaded(data) {
      // console.log('uploaded', data)
      layer.msg(data.msg);
      location.reload();
    }
    $('.jkup').jkUploader();
</script>
</body>
</html>